<script setup lang="ts">
import {inject} from 'vue'
import StyleFormText from "@/views/yz/screen/style-form/StyleFormText.vue";
import StyleFormInteractiveText from "@/views/yz/screen/style-form/StyleFormInteractiveText.vue";
import StyleFormImage from "@/views/yz/screen/style-form/StyleFormImage.vue";

const activeIndex =  inject('activeIndex')
const elements = inject('elements')
const activeElement = inject('activeElement')
const changeActiveElement = inject('changeActiveElement')
const removeActiveElement = inject('removeActiveElement')
</script>

<template>
  <div class="current-zone"> 当前组件
    <el-select v-model="activeIndex" style="width: 200px;">
      <el-option v-for="(element,index) in elements" :key="index" :label="element.name" :value="index" />
    </el-select>
    <el-button  v-show="activeIndex!=null" style="margin-left: 8px" type="danger" @click="removeActiveElement(activeIndex)">移除</el-button>
  </div>

  <StyleFormImage
      v-if="activeElement.type === 'image'" :element="activeElement"
      @change="changeActiveElement"/>
  <StyleFormText
      v-if="activeElement.type === 'text'" :element="activeElement"
      @change="changeActiveElement"/>
  <StyleFormInteractiveText
      v-if="activeElement.type === 'interactiveText'" :element="activeElement"
      @change="changeActiveElement"/>
</template>

<style scoped lang="scss">
.layout-design-style-form {
  width: 100%;
  height: 100%;
}
.current-zone {
  margin-bottom:8px;
  padding: 8px;
  border-bottom: 1px solid lightgrey;
}

.element-image {
  width: 100%;
  height: 100%;
}
</style>
